<!-- 弹框表单-1040 -->
<template>
  <el-dialog :visible.sync="params.show" @open="init" :before-close="cancel" class="dialog-form" width="1060px">
    <DialogFormTitle slot="title" title="表单3列 + 表格表单 + 表单验证3列" />
    <el-form :model="formData" ref="formData" :inline="true" label-width="100px" label-position="left">
      <el-form-item label="汉字" prop="xxx1" :rules="[V.required, V.chinese]">
        <Input v-model.trim="formData.xxx1" />
      </el-form-item>
      <el-form-item label="身份证号码" prop="xxx2" :rules="[V.required, V.identity]">
        <Input v-model.trim="formData.xxx2" />
      </el-form-item>
      <el-form-item label="输入框" prop="xxx3" :rules="[V.required]">
        <Input v-model.trim="formData.xxx3" />
      </el-form-item>
      <el-form-item label="数字框" prop="xxx4" :rules="[V.required]">
        <InputNumber v-model.trim="formData.xxx4" />
      </el-form-item>
      <el-form-item label="时间选择" prop="xxx5" :rules="[V.required]">
        <DatePicker v-model="formData.xxx5" />
      </el-form-item>
      <el-form-item label="下拉框" prop="xxx6" :rules="[V.required]">
        <Select v-model="formData.xxx6" :options="DISABLE" />
      </el-form-item>
      <el-form-item label="文件上传" prop="xxx7" :rules="[V.required]">
        <Upload v-model="formData.xxx7" />
      </el-form-item>
      <!-- 表格表单 -->
      <div class="dialog-table-form">
        <el-table :data="formData.tableData" border>
          <el-table-column width="50" type="index" label="序号"></el-table-column>
          <el-table-column width="95" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" class="el-icon-plus" @click="addRow(formData.tableData, tableDataRow)"></el-button>
              <el-button size="mini" class="el-icon-minus" @click="deleteRow(formData.tableData, scope.$index)"></el-button>
            </template>
          </el-table-column>
          <el-table-column width="200" label="名称">
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.name`" :rules="[V.required]" label=" " label-width="0">
                <Input width="100%" v-model.trim="scope.row.name" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column width="200" label="日期">
            <template slot-scope="scope">
              <el-form-item :prop="`tableData.${scope.$index}.date`" :rules="[V.required]" label=" " label-width="10">
                <DatePicker width="100%" v-model="scope.row.date"/>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column min-width="200" label="备注">
            <template slot-scope="scope">
              <TextareaDialog width="100%" v-model="scope.row.remark" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-form>
    <span slot="footer">
      <el-button type="info" @click="cancel">关 闭</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import mixin from '@/mixin/dialog-form'
import { DISABLE } from '@/constants/basic-data'

export default {
  mixins: [mixin],
  props: {
    params: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      DISABLE,
      tableData: [],
      tableDataRow: {
        name: '',
        date: '',
        remark: ''
      }
    }
  },
  methods: {
    /**
     * 弹框初始化
     */
    init() {
      this.formData = {
        tableData: []
      }
      this.addRow(this.formData.tableData, this.tableDataRow)
      if (this.params.title && this.params.title !== '新增') {
        this.formData = this.params.data
      }
      this.$refs['formData'] && this.$refs['formData'].resetFields()
    },
    /**
     * 提交
     */
    submit() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          // 表单提交
        }
      })
    },
    /**
     * 增加行
     * @param {Object} rows
     * @param {Object} data
     */
    addRow(rows, data) {
      rows.push(JSON.parse(JSON.stringify(data)))
    },
    /**
     * 删除行
     * @param {Object} rows
     * @param {Object} index
     */
    deleteRow(rows, index) {
      if (rows.length > 1) {
        rows.splice(index, 1)
      }
    }
  }
}
</script>
